{template 'member', 'header'}
<script src="{JS_PATH}sitelogo/jquery.min.js"></script>
<link href="{CSS_PATH}bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="{JS_PATH}cropper/cropper.min.css" rel="stylesheet">
<link href="{JS_PATH}sitelogo/sitelogo.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{JS_PATH}font-awesome/css/font-awesome.min.css">
<script src="{JS_PATH}cropper/cropper.min.js"></script>
<script src="{JS_PATH}sitelogo/sitelogo.js"></script>
<script src="{CSS_PATH}bootstrap/js/bootstrap.min.js"></script>
<div class="member_container main">
{template 'member', 'account_manage_left'}
  <div class="main_right">
	<div class="tit"><div class="th3">{L('modify').L('avatar')}</div></div>
	<div class="main_cont">
	<div class="ibox-content">
	<div class="row">
		<div id="crop-avatar" class="col-md-6">
			<div class="avatar-view">
				<img src="{$avatar}">
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<form class="avatar-form">
				<div class="modal-header">
					<button class="close" data-dismiss="modal" type="button">&times;</button>
					<h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
				</div>
				<div class="modal-body">
					<div class="avatar-body">
						<div class="avatar-upload">
							<input class="avatar-src" name="avatar_src" type="hidden">
							<input class="avatar-data" name="avatar_data" type="hidden">
							<label for="avatarInput" style="line-height: 35px;">图片上传</label>
							<button class="btn btn-danger fa fa-plus" type="button" style="height: 35px;" onClick="$('input[id=avatarInput]').click();"> 请选择图片</button>
							<span id="avatar-name"></span>
							<input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file">
						</div>
						<div class="row avatar-b">
							<div class="col-md-9">
								<div class="avatar-wrapper"></div>
							</div>
							<div class="col-md-3">
								<div class="avatar-preview preview-lg" id="imageHead"></div>
								<!--<div class="avatar-preview preview-md"></div>
								<div class="avatar-preview preview-sm"></div>-->
							</div>
						</div>
						<div class="row avatar-btns">
							<div class="col-md-4">
								<div class="btn-group">
									<button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"> 向左旋转</button>
								</div>
								<div class="btn-group">
									<button class="btn  btn-danger fa fa-repeat" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"> 向右旋转</button>
								</div>
							</div>
							<div class="col-md-5" style="text-align: right;">								
								<button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move" type="button" title="移动">
								<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
								</span>
							  </button>
							  <button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大图片">
								<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">
								  <!--<span class="fa fa-search-plus"></span>-->
								</span>
							  </button>
							  <button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小图片">
								<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">
								  <!--<span class="fa fa-search-minus"></span>-->
								</span>
							  </button>
							  <button type="button" class="btn btn-danger fa fa-refresh" data-method="reset" title="重置图片">
									<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;reset&quot;)" aria-describedby="tooltip866214">
							   </button>
							</div>
							<div class="col-md-3">
								<button class="btn btn-danger btn-block avatar-save fa fa-save" type="button" data-dismiss="modal"> 保存修改</button>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
<script src="{JS_PATH}sitelogo/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('#avatarInput').on('change', function(e) {
	var filemaxsize = 1024 * 5;
	var target = $(e.target);
	var Size = target[0].files[0].size / 1024;
	if(Size > filemaxsize) {
		alert('图片过大，请重新选择!');
		$('#avatarInput').val('');
		$(".avatar-wrapper").childre().remove();
		return false;
	}
	if(!this.files[0].type.match(/image.*/)) {
		alert('请选择正确的图片!');
		$('#avatarInput').val('');
	} else {
		var filename = document.querySelector("#avatar-name");
		var texts = document.querySelector("#avatarInput").value;
		var teststr = texts;
		testend = teststr.match(/[^\\]+\.[^\(]+/i);
		filename.innerHTML = testend;
	}
});
$(".avatar-save").on("click", function() {
	var avatarInput = $('#avatarInput').val();
	if(!avatarInput) {
		alert('请选择图片!');
		$('#avatarInput').val('');
		return false;
	} else {
		var img_lg = $('#imageHead');
		//截图小的显示框内的内容
		html2canvas(img_lg, {
			allowTaint: true,
			taintTest: false,
			onrendered: function(canvas) {
				canvas.id = "mycanvas";
				//生成base64图片数据
				var dataUrl = canvas.toDataURL("image/png");
				var newImg = document.createElement("img");
				newImg.src = dataUrl;
				imagesAjax(dataUrl);
				$('#avatarInput').val('');
				$("#avatar-name").empty();
				$(".avatar-wrapper").empty();
			}
		});
	}
})
function imagesAjax(src) {
	var data = {};
	data.img = src;
	$.ajax({
		url: "{APP_PATH}index.php?m=member&c=index&a=uploadavatar",
		data: data,
		type: "POST",
		dataType: 'json',
		success: function(re) {
			if(re.status == '1') {
				$('.avatar-view img').attr('src',src);
			} else {
				alert(re.msg);
			}
		}
	});
}
</script>
	</div>
  </div>		  
</div>
{template 'member', 'footer'}